import React, {Component} from 'react';
import {connect} from 'dva';
import {Toast, Flex} from 'antd-mobile';
import { goods_class } from './goodsClass.less';
import NavBottomBar from '../../components/NavBottomBar/NavBottomBar';
import SearchBarMy from '../../components/SearchBar/SearchBar';
import MyScroll from '../../components/MyScroll/MyScroll';
import CanChangeScroll from '../../components/CanChangeScroll/CanChangeScroll';

import GoodsClassMenu from './GoodsClassMenu';
import GoodsList from './GoodsList';


class GoodsClass extends Component {
    constructor(props) {
        super(props);
        this.state = {
            index: 0
        };
        this.alloyTouch = null;
    }

    componentDidMount() {
        // 保存当前的选中状态。。。
        if ( sessionStorage.getItem('goodsIndex') ) this.setState({index: sessionStorage.getItem('goodsIndex')});
        else sessionStorage.removeItem('goodsIndex');
    }

    componentWillUnmount() {
        console.log("销毁组件。。。");
        sessionStorage.setItem("goodsIndex", this.state.index);
    }

    onMenuChange = (index) => {
        // 设置滚动条
        //   console.log(id);
        this.setState({
            index: index
        });
        if( this.alloyTouch !=null ){
            this.alloyTouch.to(0);
        }
    }
    getAlloyTouch = (target) => {
        //console.log(target);
        this.alloyTouch=target;
       // target.to(0);
    }



    render() {
        const { goodsclass, dispatch } = this.props;
        const { classList } = goodsclass;
        let { index } = this.state;
        //console.log(classList);

        // let list = classList.filter((v, i, a) => {
        //     if (this.state.id == '') {
        //         return classList[0]
        //     } else {
        //         return this.state.id == v.id
        //     }
        // })


        return (
            <Flex
                style={{
                    height:"100%"
                }}
                  direction="column"
            >
                <SearchBarMy dispatch={this.props.dispatch} style={1}></SearchBarMy>

                <Flex className={goods_class} direction="column" align="start" justify="start">
                    <CanChangeScroll wrapperId="goodsClassWraperId" targetId="goodsClassTargetId" className="goods_class_left">
                        {
                            classList.map((v,i,a)=>{

                                return (
                                    <div onClick={()=>{ this.onMenuChange(i) }} className={ `${ index==i ? "gl_left_select_Item" : '' } gl_left_item` } key={i}>
                                        { v.name }
                                    </div>
                                )
                            })
                        }
                    </CanChangeScroll>
                    <MyScroll getAlloyTouch={ this.getAlloyTouch } style={{background:"#fff"}} className="goods_class_right">
                        <GoodsList
                            style={{paddingBottom: '.2rem'}}
                            dispatch={dispatch}
                            //onGoodsClassClick={this.onGoodsClassClick}
                            data={ classList.length > 0 ? classList[index] : [] }>
                        </GoodsList>
                    </MyScroll>
                </Flex>

                {/*<div className='wx-goods-class'>*/}
                    {/*<div className='wx-goods-class-menu'>*/}
                        {/*/!*<MyScroll>*!/*/}
                            {/*<GoodsClassMenu data={classList} onMenuChange={this.onMenuChange}></GoodsClassMenu>*/}
                        {/*/!*</MyScroll>*!/*/}
                    {/*</div>*/}

                    {/*<div className='wx-goods-class-list'>*/}
                        {/*<MyScroll>*/}
                            {/*<div ref='classList' className='fix-scroll hasbottom' style={{marginBottom: '0.9rem'}}>*/}
                                {/*<GoodsList*/}
                                    {/*onGoodsClassClick={this.onGoodsClassClick}*/}
                                    {/*data={list[0] || list}></GoodsList>*/}
                            {/*</div>*/}
                        {/*</MyScroll>*/}
                    {/*</div>*/}
                {/*</div>*/}
                <NavBottomBar path="/goodsClass"></NavBottomBar>
            </Flex>
        )
            ;
    }
}

export default connect(({goodsclass}) => ({goodsclass}))(GoodsClass);
